<template>
    <el-form-item :label="$t('storage.http_protocol')">
        <el-radio-group v-model="storage.qiniu_http_protocol">
            <el-radio v-for="(item, index) in http_protocols" :key="index" :label="item.value" border>{{ item.title }}</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item :label="$t('storage.region')">
        <el-select v-model="storage.qiniu_region" :placeholder="$t('common.select')" style="width: 300px;">
            <el-option label="华东-浙江(up.qiniup.com)" value="up.qiniup.com" />
            <el-option label="华东-浙江2(up-cn-east-2.qiniup.com)" value="up-cn-east-2.qiniup.com" />
            <el-option label="华北-河北(up-z1.qiniup.com)" value="up-z1.qiniup.com" />
            <el-option label="华南-广东(up-z2.qiniup.com)" value="up-z2.qiniup.com" />
            <el-option label="北美-洛杉矶(up-na0.qiniup.com)" value="up-na0.qiniup.com" />
            <el-option label="亚太-新加坡(up-as0.qiniup.com)" value="up-as0.qiniup.com" />
            <el-option label="亚太-首尔(up-ap-northeast-1.qiniup.com)" value="up-ap-northeast-1.qiniup.com" />
        </el-select>
    </el-form-item>
    <el-form-item :label="$t('storage.bucket')">
        <el-input v-model="storage.qiniu_bucket" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.http_domain')">
        <el-input v-model="storage.qiniu_http_domain" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.access_key')">
        <el-input v-model="storage.qiniu_access_key" clearable></el-input>
    </el-form-item>
    <el-form-item :label="$t('storage.secret_key')">
        <el-input v-model="storage.qiniu_secret_key" clearable></el-input>
    </el-form-item>
</template>
<script setup>
import { reactive, watch } from 'vue';
import { useStore } from 'vuex';
// 使用 Vuex store
const store = useStore();
// 接收父组件传递的 HTTP 协议选项
const props = defineProps({
    http_protocols: Array
});
// 定义用于发射更新事件的方法
const emit = defineEmits(['update-storage']);
// 本地存储配置的响应式对象
const storage = reactive({
    qiniu_http_protocol: '',
    qiniu_region: '',
    qiniu_bucket: '',
    qiniu_http_domain: '',
    qiniu_access_key: '',
    qiniu_secret_key: '',
});
// 监听 storage 对象的变化并发射 update-storage 事件
// 这允许子组件将状态更改通知给父组件
watch(storage, (newValue) => {
    emit('update-storage', newValue);
}, { deep: true });
// 监听 store.state.system.store对象变化时赋值
watch(() => store.state.system.storage, (newStorage) => {
    storage.qiniu_http_protocol = newStorage.qiniu_http_protocol;
    storage.qiniu_region = newStorage.qiniu_region;
    storage.qiniu_bucket = newStorage.qiniu_bucket;
    storage.qiniu_access_key = newStorage.qiniu_access_key;
    storage.qiniu_secret_key = newStorage.qiniu_secret_key;
}, { deep: true, immediate: true });
</script>